<template>
  <div class="cain-error-page">
    <div class="cain-error-page-box">
      <div class="cain-error-page-body">
        <img :src="item.image" alt="" />
        <div class="cain-error-page-body-conten">
          <h4>
            {{ item.title }}
          </h4>
          <p>
            {{ item.desc }}
          </p>
          <a-button type="primary">回首页</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, toRefs } from "vue";
const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { item } = toRefs(props);
</script>

<style lang="scss" scoped>
.cain-error-page {
  width: 100%;
  height: 790px;
  padding: 0px 10px;
  overflow: hidden;
  overflow-y: auto;
  .cain-error-page-box {
    width: 100%;
    background-color: #fff;
    height: 100%;
    .cain-error-page-body {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      height: 100%;
      img {
        width: 500px;
        height: 500px;
      }
    }
    .cain-error-page-body-conten {
      width: 500px;
      h4 {
        font-size: 100px;
        font-weight: 700;
      }
      p{
        font-size: 20PX;
        padding-bottom: 20PX;
      }
    }
  }
}
</style>
